<template>
	<view class="box">
		<scroll-view id="scroll-view-content" scroll-y="true" style="height: 80vh;" :scroll-top="scrollTop">
			<view class="scr">
				<view v-for="(item,index) in recordList" :key="index" :class="item.type">

					<view>
						<view style="color: #666A73;">
							{{item.type === 'me'?'佩奇':'ai'}}
						</view>
						<view class="message" :class="item.type+'message'">
							
							<view v-if="item.type === 'ai' && index !== 0" class="">
								<image v-if="item.message !=='绘画中......'" :src="item.message" mode=""></image>
								<view class="" v-else>
										{{item.message}}
								</view>
							</view>
							<view v-else v-html="item.message">{{item.message}}</view>
						</view>
					</view>
				</view>
				<view class="" style="height: 50rpx;">

				</view>
			</view>
		</scroll-view>
		<view class="message-bottom">
			<textarea @confirm='confirm' @input="handleInput" class="text" v-model="TEXT"
				style="border: 1px solid gainsboro;" placeholder="请输入您想问的问题"></textarea>
			<button class="btn" style="background-color: #42B983;color: white;" @click="sendToSpark()">发送</button>
		</view>
		<view class="rem" @click="rem">
			清除记录
		</view>
	</view>
</template>

<script>
	import * as base64 from "base-64"
	import CryptoJS from '../../static/crypto-js/crypto-js.js'
	import parser from '../../static/fast-xml-parser/src/parser'
	import * as utf8 from "utf8"
	import URL from 'url'

	export default {
		data() {
			return {
				isdz: true,
				scrollTop: 0,
				TEXT: '',
				recordList: [{
					type: 'ai',
					message: '欢迎使用程云风ai'
				}, ],
			}
		},
		onLoad() {
			
			uni.getStorage({
				key: 'recordListImage',
				success: (e) => {
					this.recordList = e.data
					setTimeout(()=>{
						this.scrollTop = 50000000
					},500)
				}
			})
		},
		methods: {
			checkStringExist(str, searchStr) {
				const regex = new RegExp(searchStr);
				return regex.test(str);
			},
			handleInput(event) {
				const is = this.checkStringExist(this.TEXT, '\n')
				console.log(is);
				// 检查是否是回车键触发的换行
				if (is) {
					// 如果是键盘弹起导致的换行，则阻止
					this.confirm()
				}
			},
			renderMarkdown(markdownText) {
				return md.render(markdownText)
			},
			rem() {
				uni.showModal({
					title: '提示',
					content: '确定清除所有记录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorage({
								key: 'recordListImage'
							})
							this.recordList = [{
								type: 'ai',
								message: '欢迎使用程云风ai'
							}, ]
						} else if (res.cancel) {}
					}
				});
			},
			confirm(e) {
				this.sendToSpark()
			},
			getsctop() {
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					this.scrollTop += 5
				}, 10)
			},
			async sendToSpark() {
				this.getsctop()
				this.isdz = true
				const text = this.TEXT
				this.TEXT = ''
				let realThis = this;
				//连接websocket
				this.recordList.push({
					type: 'me',
					message: text
				})
				this.recordList.push({
					type: 'ai',
					message: '绘画中......'
				})
				uni.request({
					url: 'http://123.60.219.214:3000/getimage',
					method: "GET",
					data: {
						text:text
					},
				
					success:(e)=> {
						if(e.data[0]) {
							console.log(e.data);
							let str = `data:image/jpg;base64,${e.data[0].content}`
							this.recordList[this.recordList.length-1].message = str.replace(/[\r\n]/g, '')
						}else {
							this.recordList[this.recordList.length-1].message = '请求失败'
						}
						uni.setStorage({
							key: 'recordListImage',
							data:this.recordList
						})
						this.getsctop()
						setTimeout(()=>{
							clearInterval(this.timer)
						},1000)
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	.cursor2 {
		position: absolute;
		display: inline-block;
		width: 2px;
		height: 16px;
		background-color: #fff;
		animation: blink 1s infinite;
		transform: translate(2px, 3px);
	}

	@keyframes blink {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}

	.rem {
		position: fixed;
		top: 0.8%;
		right: 1%;
		z-index: 999999;
		// background-color: red;
		color: red;
		font-weight: 700;
		padding: 10rpx;
		border-radius: 15rpx;


	}

	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}


	.box {
		margin: 30rpx;
	}

	.text {
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.scr {
		content-visibility: auto;
		display: flex;
		flex-flow: column;
	}

	.message {
		display: inline-block;
		padding: 20rpx;
		background-color: #42B983;
		border-radius: 15rpx;
		margin-top: 15rpx;
		color: #fff;

	}

	.message-bottom {
		background-color: #fff;
		width: 100vw;
		position: fixed;
		bottom: 0;
		display: flex;
		left: 0;
		padding-left: 20rpx;
		padding-top: 20rpx;
		justify-content: space-between;
		align-items: center;

		.text {
			height: 100rpx;
			flex: 3;
			border-radius: 15rpx;
		}

		.btn {
			flex: 1;
			height: 100rpx;
			margin-right: 40rpx;
			margin-left: 15rpx;
		}

	}

	.me {
		display: inline-block;
		text-align: right;
	}

	.aimessage {
		background-color: #00aaff;
	}

	.ai {
		display: inline-block;
	}
</style>
